{ "cells": [ { "cell_type": "markdown", "metadata": {}, "source": [ "_Notes from Jan 26, 2015, CS110 Introduction to Computing, Bryn Mawr College. [Douglas Blank](mailto:dblank@cs.brynmawr.edu)._" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "# 1. What can you do with Processing?" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Some examples:\n", "\n", "\n", "\n", "\n", "\n", "\n", "\n", "\n", "\n", "\n", "\n", "\n", "\n", "* [my twitter likes](https://twitter.com/favorites) @DougBlank\n", "* http://www.openprocessing.org/\n", "* https://processing.org/examples/\n", "\n", "Now, let's see what you can do! [Assignment #1](http://jupyter.cs.brynmawr.edu/hub/dblank/public/CS110%20Intro%20to%20Computing/2015/Assignments/Assignment1.ipynb)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "# 2. Jupyter and Processing" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## 2.1 Jupyter" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Jupyter is the name of the system that you log into. It is running on a server at Bryn Mawr College. It allows you to run code in a variety of programming languages inside things called \"notebooks.\" Each notebook is made up of cells. Cells can have text (called \"markdown\", like this text).\n", "\n", "You can turn on spell-checking by clicking the button in the toolbar.\n", "\n", "You can control how a cell is treated (code or markdown) by selecting from the picklist in the toolbar.\n", "\n", "You can also put code in a cell, like this:" ] }, { "cell_type": "code", "execution_count": 11, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "\n", " var component = document.getElementById(\"sketch_11\");\n", " if (component != undefined)\n", " component.remove();\n", " component = document.getElementById(\"state_11\");\n", " if (component != undefined)\n", " component.remove();\n", " component = document.getElementById(\"controls_div_11\");\n", " if (component != undefined)\n", " component.remove();\n", " require([\"http://cs.brynmawr.edu/~dblank/processing/processing.js\"], function() {\n", " // FIXME: Stop all previously running versions (?)\n", " var processingInstance = Processing.getInstanceById(\"canvas_11\");\n", " if (processingInstance != undefined && processingInstance.isRunning())\n", " processingInstance.noLoop();\n", " });\n", " " ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "\n", "
\n", " Sketch #11:
\n", "
\n", "
\n", "
\n", " \n", " \n", " \n", " \n", "
\n", "Sketch #11 state: Loading...
\n", "\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "fill(0);\n", "text(\"This is a sketch\", 10, 15);\n", "text(\"You can write\", 10, 30);\n", "text(\"and draw:\", 10, 45);\n", "fill(255, 0, 0);\n", "ellipse(50, 75, 25, 25);" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Cells should be run sequentially, from top to bottom. You can get information on how to use the notebook for writing here: [Jupyter Notebook Users Manual](http://jupyter.cs.brynmawr.edu/hub/dblank/public/Jupyter%20Notebook%20Users%20Manual.ipynb).\n", "\n", "Tips:\n", "\n", "* You can press `SHIFT+TAB` after a name to get help on it\n", "* you can press `TAB` after a few letters to complete the variable or function \n", "\n", "You can create text with headings, styles, and even create equations, like:\n", "\n", "$$ \\left(\\!\n", " \\begin{array}{c}\n", " n \\\\\n", " r\n", " \\end{array}\n", " \\!\\right) = \\frac{n!}{r!(n-r)!} $$\n" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## 2.2 Processing" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Processing is a programming language. You write programs as \"sketches.\" Each sketch goes into a Jupyter cell.\n", "\n", "The **syntax** of the Processing language is a subset of the Java programming language. After you write a sketch (a program) in Processing, there are a number of things that you can do with it:\n", "\n", "1. **compile it** and run it with Java\n", "2. **translate** it to JavaScript and run it\n", "\n", "We are doing number 2 here. Note that there are some differences between these two methods:\n", "\n", "* The Java version can use Java libraries (like robot control)\n", "* The Java version can create files, and do things on your computer\n", "* The JavaScript version runs in your web browser\n" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "# 3. Sketch" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "There are two special functions: `draw()` and `setup()`:\n", "\n", "* put code in `setup()` that is to be run once, at the start of your program. \n", "* put code in `draw()` that is to be run many times a second\n", "\n", "You don't have to use those two methods. For now, you can simply put code in the sketch outside of any function.\n", "\n", "Functions to explore:\n", "\n", "* size()\n", "* background()\n", "* point()\n", "* line()\n", "* triangle()\n", "* rectangle()\n", "* quad()\n", "* ellipse()" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "# 4. Draw by Numbers (DBN)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Here we will draw a circle in the draw() function by using the ellipse function.\n", "\n", "**What is a function?**" ] }, { "cell_type": "code", "execution_count": 1, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "\n", " var component = document.getElementById(\"sketch_1\");\n", " if (component != undefined)\n", " component.remove();\n", " component = document.getElementById(\"state_1\");\n", " if (component != undefined)\n", " component.remove();\n", " component = document.getElementById(\"controls_div_1\");\n", " if (component != undefined)\n", " component.remove();\n", " require([\"http://cs.brynmawr.edu/~dblank/processing/processing.js\"], function() {\n", " // FIXME: Stop all previously running versions (?)\n", " var processingInstance = Processing.getInstanceById(\"canvas_1\");\n", " if (processingInstance != undefined && processingInstance.isRunning())\n", " processingInstance.noLoop();\n", " });\n", " " ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "\n", "
\n", " Sketch #1:
\n", "
\n", "
\n", "
\n", " \n", " \n", " \n", " \n", "
\n", "Sketch #1 state: Loading...
\n", "\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "void draw() {\n", " ellipse(50, 50, 80, 80);\n", "}" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "We can make the canvas larger by using the size() function inside the setup() function. size **takes** a width and a hight as **arguments**." ] }, { "cell_type": "code", "execution_count": 2, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "\n", " var component = document.getElementById(\"sketch_2\");\n", " if (component != undefined)\n", " component.remove();\n", " component = document.getElementById(\"state_2\");\n", " if (component != undefined)\n", " component.remove();\n", " component = document.getElementById(\"controls_div_2\");\n", " if (component != undefined)\n", " component.remove();\n", " require([\"http://cs.brynmawr.edu/~dblank/processing/processing.js\"], function() {\n", " // FIXME: Stop all previously running versions (?)\n", " var processingInstance = Processing.getInstanceById(\"canvas_2\");\n", " if (processingInstance != undefined && processingInstance.isRunning())\n", " processingInstance.noLoop();\n", " });\n", " " ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "\n", "
\n", " Sketch #2:
\n", "
\n", "
\n", "
\n", " \n", " \n", " \n", " \n", "
\n", "Sketch #2 state: Loading...
\n", "\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "void setup() {\n", " size(500, 500);\n", "}\n", "\n", "void draw() {\n", " ellipse(50, 50, 80, 80);\n", "}" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "It would be nice to make the circle draw in the center with a size proportional to the size of the canvas." ] }, { "cell_type": "code", "execution_count": 14, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "\n", " var component = document.getElementById(\"sketch_14\");\n", " if (component != undefined)\n", " component.remove();\n", " component = document.getElementById(\"state_14\");\n", " if (component != undefined)\n", " component.remove();\n", " component = document.getElementById(\"controls_div_14\");\n", " if (component != undefined)\n", " component.remove();\n", " require([\"http://cs.brynmawr.edu/~dblank/processing/processing.js\"], function() {\n", " // FIXME: Stop all previously running versions (?)\n", " var processingInstance = Processing.getInstanceById(\"canvas_14\");\n", " if (processingInstance != undefined && processingInstance.isRunning())\n", " processingInstance.noLoop();\n", " });\n", " " ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "\n", "
\n", " Sketch #14:
\n", "
\n", "
\n", "
\n", " \n", " \n", " \n", " \n", "
\n", "Sketch #14 state: Loading...
\n", "\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "int width = 500;\n", "int height = 500;\n", "\n", "void setup() {\n", " size(width, height);\n", "}\n", "\n", "void draw() {\n", " ellipse(width/2, height/2, width, height);\n", "}" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Team up with a partner and create a sketch that is a joint work. Don't cut and paste an example, but create the whole thing from scratch.\n", "\n", "When done, click on the Publish button in the toolbar. That will give you a URL that you can share with friends and family." ] } ], "metadata": { "kernelspec": { "display_name": "Calysto Processing", "name": "calysto_processing" }, "language_info": { "file_extension": ".pjs", "mimetype": "text/x-processing", "name": "java" } }, "nbformat": 4, "nbformat_minor": 0 }